<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
    <countDate :remain-time="remainTime" />
</head>
<body>
    <div id='app'>
        <h1>秒杀详情</h1>
        <h4>点击秒杀</h4>
        <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"
            disabled="false">
            <el-form-item label="商品名称:" prop="goodsName">
                {{dataForm.goodsName}}
                <!-- <el-input  v-model="dataForm.goodsName" placeholder="商品名称" ></el-input> -->
            </el-form-item>
            <el-form-item label="商品标题:" prop="goodsTitle">
                {{dataForm.goodsTitle}}
                <!-- <el-input v-model="dataForm.goodsTitle" placeholder="商品标题"></el-input> -->
            </el-form-item>
            <el-form-item label="商品图片:" prop="goodsImg">
                <el-input v-model="dataForm.goodsImg" placeholder="商品图片"></el-input>
                <!-- <el-upload action="http://localhost:88/api/user/goods/upload" class="upload-demo"
                              :on-success="uploadFile" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                              <el-button size="small" type="primary">点击上传</el-button>
                              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                          </el-upload> -->
                <template slot-scope="scope">
                    <img :src="dataForm.goodsImg" alt="" width="100px" height="100px" />
                </template>

            </el-form-item>
            <el-form-item label="商品详细介绍" prop="goodsDetail" label-width="100px">
                {{dataForm.goodsDetail}}
                <!-- <el-input v-model="dataForm.goodsDetail" placeholder="商品详细介绍"></el-input> -->
            </el-form-item>
            <el-form-item label="原价:" prop="goodsPrice">
                {{dataForm.goodsPrice}}
                <!-- <el-input v-model="dataForm.goodsPrice" placeholder="原价"></el-input> -->
            </el-form-item>
            <el-form-item label="商品库存，-1表示没有限制" prop="goodsStock" hidden="true">
                <el-input v-model="dataForm.goodsStock" placeholder="商品库存，-1表示没有限制"></el-input>
            </el-form-item>
            <el-form-item label="商品id" prop="goodsId" hidden="true">
                <el-input v-model="dataForm.goodsId" placeholder="商品id"> </el-input>
            </el-form-item>
            <el-form-item label="秒杀价格（元）:" prop="miaoshaPrice">
                {{dataForm.miaoshaPrice}}
                <!-- <el-input v-model="dataForm.miaoshaPrice" placeholder="秒杀价格"></el-input> -->
            </el-form-item>
            <el-form-item label="库存数量（件）:" prop="stockCount">
                {{dataForm.stockCount}}
                <!-- <el-input v-model="dataForm.stockCount" placeholder="库存数量"></el-input> -->
            </el-form-item>
            <el-form-item label="秒杀开始时间:" prop="startDate" label-width="100px">
                <!-- <el-input v-model="dataForm.startDate" placeholder="秒杀开始时间"></el-input> -->
                <div class="block">
                    <!-- <span class="demonstration">默认</span> -->
                    <el-date-picker v-model="dataForm.startDate" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>

            </el-form-item>
            <el-form-item label="秒杀结束时间" prop="endDate" label-width="100px">
                <!-- <el-input v-model="dataForm.endDate" placeholder="秒杀结束时间"></el-input> -->
                <div class="block">
                    <!-- <span class="demonstration">默认</span> -->
                    <el-date-picker v-model="dataForm.endDate" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-form-item>
            <span v-if="dataForm.flag==1">
                <span>距活动结束还有:{{ dayString }}天{{ hourString }}小时{{ minuteString
                }}分钟{{
                secondString }}秒</span>
            </span>
            <span v-if="dataForm.flag==2">
                <span>距活动开始还有:{{ dayString }}天{{ hourString }}小时{{ minuteString
                }}分钟{{
                secondString }}秒</span>
            </span>
            <span v-if="dataForm.flag==3">
                <span>活动已结束</span>
            </span>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="ccc()">取消</el-button>
            <span v-if="dataForm.flag==1">
                 <el-button type="primary" @click="getMiaoshaPath()">
                 秒杀倒计时:{{ dayString }}天
                 {{ hourString }}小时
                 {{ minuteString
                }}分钟{{secondString }}秒</el-button>
            </span>
            <span v-if="dataForm.flag==2">
                <el-button type="primary"  disabled="false"><span>距活动开始还有:{{ dayString }}天{{ hourString }}小时{{ minuteString
                }}分钟{{
                secondString }}秒</span></el-button>
           </span>
           <span v-if="dataForm.flag==3">
            <el-button type="primary" disabled="false">活动已结束</el-button>
       </span>
           
        </span>

    </div>
    <script>
        new Vue({
            el: '#app',
            props: {
                remainTime: {
                    // 倒计时间总秒数
                    type: Number,
                    default: 0
                }
            },
            data() {
                return {
                    baseurl: "http://localhost:88/api",
                    dataForm: {
                        userId:localStorage.getItem("userId"),
                        actId: localStorage.getItem("actId"),
                        goodsId: '',
                        miaoshaPrice: '',
                        stockCount: '',
                        startDate: '',
                        endDate: '',
                        goodsName: '',
                        goodsTitle: '',
                        goodsImg: '',
                        goodsDetail: '',
                        goodsPrice: '',
                        goodsStock: '',
                        flag:""
                    },
                    day: '',
                    hour: '',
                    minute: '',
                    second: '',
                    promiseTimer: '',
                    path:""
                }
            },
            computed: {//computed用来监控自己定义的变量
                hourString() {
                    return this.formatNum(this.hour)
                },
                minuteString() {
                    return this.formatNum(this.minute)
                },
                secondString() {
                    return this.formatNum(this.second)
                },
                dayString() {
                    return this.formatNum(this.day)
                }
            },
            mounted() {
                // if (this.remainTime > 0) {
                //     this.day = Math.floor((this.remainTime / 3600) / 24)
                //     this.hour = Math.floor((this.remainTime / 3600) % 24)
                //     this.minute = Math.floor((this.remainTime / 60) % 60)
                //     this.second = Math.floor(this.remainTime % 60)
                //     this.countDowm()
                // }
            },
            //方法集合
            methods: {
                //倒计时
                countDowm() {
                    var self = this
                    clearInterval(this.promiseTimer)
                    this.promiseTimer = setInterval(function () {
                        if (self.day === 0) {
                            if (self.hour === 0) {
                                if (self.minute !== 0 && self.second === 0) {
                                    self.second = 59
                                    self.minute -= 1
                                } else if (self.minute === 0 && self.second === 0) {
                                    self.second = 0
                                    self.$emit('countDowmEnd', true)
                                    clearInterval(self.promiseTimer)
                                } else {
                                    self.second -= 1
                                }
                            } else {
                                if (self.minute !== 0 && self.second === 0) {
                                    self.second = 59
                                    self.minute -= 1
                                } else if (self.minute === 0 && self.second === 0) {
                                    self.hour -= 1
                                    self.minute = 59
                                    self.second = 59
                                } else {
                                    self.second -= 1
                                }
                            }
                        } else {
                            if (self.hour === 0 && self.minute === 0 && self.second === 0) {
                                self.day -= 1
                                self.hour = 23
                                self.minute = 60
                                self.second = 60
                            } else {
                                if (self.hour === 0) {
                                    if (self.minute !== 0 && self.second === 0) {
                                        self.second = 59
                                        self.minute -= 1
                                    } else if (self.minute === 0 && self.second === 0) {
                                        self.second = 0
                                    } else {
                                        self.second -= 1
                                    }
                                } else {
                                    if (self.minute !== 0 && self.second === 0) {
                                        self.second = 59
                                        self.minute -= 1
                                    } else if (self.minute === 0 && self.second === 0) {
                                        self.hour -= 1
                                        self.minute = 59
                                        self.second = 59
                                    } else {
                                        self.second -= 1
                                    }
                                }
                            }
                        }
                    }, 1000)//因为.getTime()是获取从1970年到指定时间之间的毫秒数，
                    //而组件内是按照秒数来计算的，所以需要除以1000
                },
                formatNum(num) {
                    return num < 10 ? '0' + num : '' + num
                },
                //回显
                init(id) {
                    axios.get(`${this.baseurl}/user/activity/info/${this.dataForm.actId}`)

                        .then(({ data }) => {
                            if (data && data.code === 0) {
                                console.log(data);
                                this.dataForm.goodsId = data.activity.goodsId
                                this.dataForm.startDate = data.activity.startDate
                                this.dataForm.endDate = data.activity.endDate
                                this.dataForm.miaoshaPrice = data.activity.miaoshaPrice
                                this.dataForm.stockCount = data.activity.stockCount
                                this.dataForm.goodsName = data.goodsEntity.goodsName
                                this.dataForm.goodsTitle = data.goodsEntity.goodsTitle
                                this.dataForm.goodsImg = data.goodsEntity.goodsImg
                                this.dataForm.goodsDetail = data.goodsEntity.goodsDetail
                                this.dataForm.goodsPrice = data.goodsEntity.goodsPrice
                                this.dataForm.goodsStock = data.goodsEntity.goodsStock;
                                const st1 = new Date().getTime();//当前时间毫秒值
                                const st2 = new Date(this.dataForm.startDate).getTime();//开始时间
                                const st3 = new Date(this.dataForm.endDate).getTime();//结束时间
                                console.log("--------------" + st2);
                                
                                // const ddcc = st3 - st1 //结束时间倒计时
                                // const cccc = st3 - st1 //时间差

                                // this.remainTime = desc / 1000;
                                // this.endmainTime = ddcc / 1000;
                                // this.chaTime = cccc / 1000;
                                // console.log('时间减法----', desc / 1000)

                                //当前时间-开始时间>0并且当前时间-结束时间<0
                                if(st1-st2>0 & st1-st3<0){
                                    //开始未结束
                                    const desc = st3 - st1  //距离结束时间  结束时间-当前时间毫秒值 
                                    this.remainTime=desc/1000    //毫秒值转换利用上面方法转换为天小时分钟秒的格式
                                    this.dataForm.flag=1
                                }  
                                else if(st1-st2<0)  //当前时间-开始时间小于0 活动未开始
                                { const desc=st2-st1 
                                this.remainTime=desc/1000
                                this.dataForm.flag=2

                                }else{//活动结束
                                    const desc=0
                                    this.remainTime=desc/1000
                                    this.dataForm.flag=3
                                }

                                //当前时间和开始时间的时间差毫秒值

                                this.day = Math.floor((this.remainTime / 3600) / 24)
                                this.hour = Math.floor((this.remainTime / 3600) % 24)
                                this.minute = Math.floor((this.remainTime / 60) % 60)
                                this.second = Math.floor(this.remainTime % 60)
                                this.countDowm();
                                console.log(this.dataForm)

                            }
                        });

                },
                // 表单提交
                dataFormSubmit(path) {
                    path=this.path
                    this.$refs['dataForm'].validate((valid) => {
                        if (valid) {
                            axios({
                                url:`${this.baseurl}/orders/order/save2/${this.path}`,
                                method: 'post',
                                data: ({
                                    'userId':this.dataForm.userId,
                                    'actId': this.dataForm.actId,
                                    'goodsId': this.dataForm.goodsId,
                                    'goodsName': this.dataForm.goodsName,
                                    'goodsTitle': this.dataForm.goodsTitle,
                                    'goodsImg': this.dataForm.goodsImg,
                                    'goodsDetail': this.dataForm.goodsDetail,
                                    'goodsPrice': this.dataForm.goodsPrice,
                                    'goodsCount': this.dataForm.stockCount
                                })
                            }).then(({ data }) => {
                                if (data && data.code === 0) {
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success',
                                        duration: 1500,
                                        onClose: () => {
                                            this.visible = false
                                            this.$emit('refreshDataList')
                                        }    
                                    })
                                   
                                    console.log(data);
                                    localStorage.setItem("orderId",data.data);
                                    //跳转订单详情页面
                                    location="./orderList.html";
                                } else {
                                    this.$message.error(data.msg)
                                }
                            })
                        }
                    })
                },
                ccc(){
                    location="./actList.html"
                },
                //获取秒杀地址
                getMiaoshaPath(){
                    axios.get(`${this.baseurl}/user/activity/fangshua/${this.dataForm.goodsId}/${this.dataForm.userId}`)
                    .then(({ data }) => {
                                if (data && data.code === 0) {
                                   
                                    console.log(data);
                                 //生成一个随机数
                                    this.path=data.data
                                    //然后去执行秒杀
                                    this.dataFormSubmit(this.path);
                                 

                                } else {
                                    this.$message.error(data.msg)
                                }
                            })

                }
            },
            created() {
                this.init();

            },
        })
    </script>
</body>

</html>